<template>
  <div>
    <div>
      <input type="text" v-model="form.id">
      <input type="text" v-model="form.name">
      <button @click="handleAdd">提交</button>
    </div>
    <ul>
      <li v-for="item, index in obj.arr" :key="item.id" @click="handleDel(index)">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { reactive } from 'vue';
// Hook
const useAddItem = () => {
  const obj = reactive({
    arr: [
      {
        id: 0,
        name: 'ifer',
      },
      {
        id: 1,
        name: 'elser',
      },
      {
        id: 2,
        name: 'xxx',
      },
    ],
  })
  const form = reactive({
    id: '',
    name: ''
  })
  const handleAdd = () => {
    obj.arr.push({
      ...form
    })
    form.id = ''
    form.name = ''
  }
  return {
    obj,
    handleAdd,
    form
  }
}

const useDelItem = (obj) => {
  const handleDel = (index) => {
    obj.arr.splice(index, 1)
  }
  return {
    handleDel
  }
}

export default {
  setup() {
    const { obj, handleAdd, form } = useAddItem()
    const { handleDel } = useDelItem(obj)
    return { obj, handleAdd, form, handleDel }
  }
}
</script>